@extends('layout.app')

@section('title', 'Form Event')

{{--@section('sidebar')
    @parent
    <p>this text is append to sidebar</p>
@endsection--}}
<style>
    .map{
        height: 400px;
    }
</style>
@section('content')
<div class="container">
    <div class="card d-flex mt-3">
        <div class="card-header m-lg-0">
            <div class="card-title">Iteration</div>
        </div>
        <div class="card-body" id="element-1">
        @verbatim
            <div class="border-bottom border-info form-group">
                <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
{{--                <script src="https://unpkg.com/vue"></script>--}}
                <div id="app">
                    <google-map>
                        <google-map-marker v-bind:places="vueConfCities"></google-map-marker>
                    </google-map>
                </div>
                <p class="text-warning m-0">Your value is:</p>
                <p class="text-success m-0">@{{advice}}</p>
            </div>
            <div class="border-bottom border-info form-group">
                <p class="text-warning m-0">Your value is:</p>
                <p class="text-success m-0">@{{advice}}</p>
            </div>
        @endverbatim
        </div>
    </div>
</div>
@verbatim
<script>
    Vue.component('google-map', {
        provide: function () {
            return {
                getMap: this.getMap
            }
        },
        data: function () {
            return {
                map: null
            }
        },
        mounted: function () {
            this.map = new google.maps.Map(this.$el, {
                center: { lat: 0, lng: 0 },
                zoom: 1
            })
        },
        methods: {
            getMap: function (found) {
                var vm = this;
                function checkForMap () {
                    if (vm.map) {
                        found(vm.map)
                    } else {
                        setTimeout(checkForMap, 50)
                    }
                }
                checkForMap()
            }
        },
        template: '<div class="map"><slot></slot></div>'
    })

    Vue.component('google-map-marker', {
        inject: ['getMap'],
        props: ['places'],
        created: function () {
            var vm = this;
            vm.getMap(function (map) {
                vm.places.forEach(function (place) {
                    new google.maps.Marker({
                        position: place.position,
                        map: map
                    })
                })
            })
        },
        render (h) {
            return null
        }
    });

    new Vue({
        el: '#app',
        data: {
            vueConfCities: [
                {
                    name: 'Wrocław',
                    position: {
                        lat: 51.107885,
                        lng: 17.038538
                    }
                },
                {
                    name: 'New Orleans',
                    position: {
                        lat: 29.951066,
                        lng: -90.071532
                    }
                }
            ]
        }
    });
</script>
@endverbatim
@endsection


